<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      cdata: {
        year: null,
        weekCategory:[],
        radarData:[],
        radarDataAvg: [],
        maxData: 0,
        weekMaxData: [],
        weekLineData: [],
        category : [],
        maxRadarData: 0
      },
      drawTiming: null,
      data: {
        year: '2021',
        weekCategory:[],
        radarData: [],
        radarDataAvg: [ ],
        maxData: 0,
        weekMaxData: [],
        weekLineData: [],
        category : [],
        maxRadarData: 0
      },
      index:0
    }
  },
  components: {
    Chart,
  },
  watch: {
    chartData: {
      handler (newData ) {
        console.log('newData',newData)
        if (newData != null && typeof(newData.energy) !== 'undefined' && typeof(newData.energy.weekCategory) !== 'undefined'){
          let dateBase = new Date();
          const weekCategory = newData.energy.weekCategory;
          console.log('weekCategory',weekCategory)
          const radarData = newData.energy.radarData
          console.log('radarData',radarData)
          const radarDataAvg = newData.energy.radarDataAvg
          console.log('radarDataAvg',radarDataAvg)
          const weekLineData = newData.energy.weekLineData
          console.log('weekLineData',weekLineData)
          const category = []
          const radarsDatas = []
          const radarsDataAvgs = []
          const weekMaxData = []
          let maxRadarData = 0
          for (let j = 0; j < radarData.length; j++)
          {
              const radar = radarData[j];
              const radars = []
              for (let i = 0 ;i < radar.length; i++){
                const ra = radar[i]
                const value = ra.value;
                const name = ra.name;
                if (!category.includes(name))
                {
                  category.push(name)
                }
                radars.push(value)
                  if (value > maxRadarData){
                    maxRadarData = value
                  }
              }
              radarsDatas.push(radars)
          }
          for (let j = 0 ;j < radarDataAvg.length; j++) {
            const avgs = []
            const radarAvg = radarDataAvg[j]
            for (let i = 0; i < radarAvg.length; i++) {
              const avg = radarAvg[i]
              avgs.unshift(avg.value)
              if (avg.value > maxRadarData){
                maxRadarData = avg.value
              }
            }
            radarsDataAvgs.push(avgs)
          }
          this.data = {
            year: dateBase.getFullYear(),
            weekCategory: weekCategory,
            radarData:radarsDatas ,
            radarDataAvg: radarsDataAvgs,
            maxData: newData.energy.maxData,
            weekMaxData: weekMaxData,
            weekLineData:weekLineData,
            category : category,
            maxRadarData: maxRadarData
          }
        }
      },
      immediate: true,
      deep: true
    }
  },

  mounted () {
    this.drawTimingFn();
  },
  beforeDestroy () {
    clearInterval(this.drawTiming);
  },
  methods: {
    drawTimingFn () {
      this.setData();
      this.drawTiming = setInterval(() => {
        this.setData();
      }, 6000);
    },
    setData () {
      if (this.data.weekCategory.length > 0)
      {
        this.cdata = {
          year:this.data.year,
          weekCategory:this.data.weekCategory[this.index],
          radarData:this.data.radarData[this.index],
          radarDataAvg: this.data.radarDataAvg[this.index],
          maxData: this.data.maxData,
          weekMaxData: this.data.weekMaxData[this.index],
          weekLineData: this.data.weekLineData[this.index],
          category : this.data.category

        }
      }
      this.index += 1
      if (this.index === this.data.weekCategory.length)
      {
        this.index = 0
      }
      // 清空轮询数据
      // this.cdata.weekCategory = [];
      // this.cdata.weekMaxData = [];
      // this.cdata.weekLineData = [];
      // this.cdata.radarData = [];
      // this.cdata.radarDataAvg = [];
      //
      // let dateBase = new Date();
      // this.cdata.year = dateBase.getFullYear();
      // // 周数据
      // for (let i = 0; i < 7; i++) {
      //   // // 日期
      //   let date = new Date();
      //   this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
      //
      //   // 折线图数据
      //   this.cdata.weekMaxData.push(this.cdata.maxData);
      //   let distance = Math.round(Math.random() * 11000 + 500);
      //   this.cdata.weekLineData.push(distance);
      //
      //   // 雷达图数据
      //   // 我的指标
      //   let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
      //   let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
      //   let hour = +(distance / 1000 / averageSpeed).toFixed(1);
      //   let second = +(distance / 100 / averageSpeed).toFixed(1);
      //   let radarDayData = [distance, averageSpeed, maxSpeed, hour, second];
      //   this.cdata.radarData.unshift(radarDayData);
      //
      //   // 平均指标
      //   let distanceAvg = Math.round(Math.random() * 8000 + 4000);
      //   let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
      //   let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
      //   let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
      //   let radarDayDataAvg = [
      //     distanceAvg,
      //     averageSpeedAvg,
      //     maxSpeedAvg,
      //     hourAvg
      //   ];
      //   this.cdata.radarDataAvg.unshift(radarDayDataAvg);
      // }
      // console.log(this.cdata)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
